<template>
    <div class="login-container">
        <el-form :rules="rule" :model="form" label-width="auto" >
            <h3>登录--刊期在线系统</h3>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名称" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">登录</el-button>
                <el-button>注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script setup lang="ts">
    import { reactive } from 'vue'

    // do not use same name with ref
    const form = reactive({
        username: '',
        password: ''
    });

    const rule = reactive({
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
        ]
    });

    const onSubmit = () => {
        console.log('submit!')
        fetch('http://127.0.0.1:1024/api/user/login', {
            method: 'post',
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                username: 'admin',
                password: '123456'
            })
        })
    }
</script>

<style scoped lang="scss">
    .login-container {
        .el-form {
            max-width: 700px;
            min-height: 200px;
            //border: 1px solid red;
            margin: 200px auto;
            padding: 20px;
            background: #999;
            box-shadow: 0px 5px 5px #999;
            border-radius: 5px;
            h3 {
                text-align: center;
                margin: 30px 0;
                color: #ccc;
            }
            ::v-deep .el-form-item__content {
                justify-content: center !important;
            }
        }
    }
</style>